import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Icon, Tag } from 'ygbh'
import classNames from 'classnames';
import styles from '../style/demo.module.scss'

const codeUrl1 = 'https://codepen.io/xiebaolin/pen/mdMBKBm';
const codeVal1 = `
import { Icon } from 'ygbh';
ReactDOM.render(
  <>
    <div>
	<Icon name='edit'></Icon>
	<Icon name='share'></Icon>
	<Icon name='delete'></Icon>
    </div>
  </>,
  mountNode,
);
`;
function Demo() {
	//实例-start
	const [showCoreFlag1, setShowCoreFlag1] = useState(false);
	
	const classString1 = classNames('source-case-mod', {
		'show-case-core': showCoreFlag1,
	});
	const toggleCoreFlag1 = () => {
		setShowCoreFlag1(!showCoreFlag1);
	};
	const copyCaseFn1 = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal1; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	//实例-end
	const copyCaseFn2 = (value:any) => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = `<Icon name="${value}"></Icon>`;; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const iconList = [{
		name: 'edit',
	},{
		name: 'share',
	},{
		name: 'delete',
	},{
		name: 'search',
	},{
		name: 'back',
	},{
		name: 'right',
	},{
		name: 'bottom',
	},{
		name: 'top',
	},{
		name: 'close',
	},{
		name: 'check',
	},{
		name: 'minus',
	},{
		name: 'plus',
	},{
		name: 'star-on',
	},{
		name: 'star-off',
	},{
		name: 'arrow-left',
	},{
		name: 'arrow-right',
	},{
		name: 'user-solid',
	},{
		name: 'picture-outline',
	},{
		name: 'circle-check',
	},{
		name: 'warning-outline',
	},{
		name: 'info',
	},{
		name: 'success',
	}];
	return (
		<BaseLayout>
		    <h2 className="intro-title">Icon 图标</h2>
		    <p className="intro-content">语义化的矢量图形。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<div className="demo-block">
			    <section className={classString1}>
			        <section className="code-box-demo">
			            <div className={styles.codeboxdemo}>
			                {iconList.map((item) => {
			                	return <div className={styles.codeboxitem} key={item.name} onClick={(event)=>{copyCaseFn2(item.name);}}><Icon name={item.name}></Icon></div>
			                })}
						</div>
			        </section>
			        <section className="code-box-meta">
			            <div className="code-box-title">基本</div>
			            <div className="code-box-description"></div>
			            <div className="code-box-actions">
			            	<a href={codeUrl1} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
			            		<Codepensvg></Codepensvg>
			            	</a>
			            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn1}>
			            	    <Copysvg></Copysvg>
			            	</span>
			            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag1}></span>
			            </div>
			        </section>
			        <section className="highlight-wrapper">
			            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal1}></textarea>
			        </section>
				</section>
			</div>
		</BaseLayout>
	)
}

export default Demo
